<!DOCTYPE html>
<html>
<head>
<title>HTML5</title>
<meta charset="UTF-8" />
<style type="text/css">
 #logout,#inputMsg {
  display: none;
 }
</style>
<script type="text/javascript" src="../../js/common.js"></script>
<script type="text/javascript">
 
 // 로그인 요청
 function login(){
  // 대화명 체크
  if(nicknameE.value.length < 2){
   alert("대화명을 2글자 이상 입력하세요.");
   nicknameE.focus();
   return;
  }
  
  // 서버 접속
  connectServer();  
  // 로그인 메세지 전송
  sendMsg(nicknameE.value + "님이 입장했습니다.");
  
  // 로그인 버튼을 숨긴다.
  loginE.style.display = "none";
  // 로그아웃 버튼을 나타낸다.
  logoutE.style.display = "inline";
  // 메세지 입력창을 나타낸다.
  inputMsgE.style.display = "inline";
  // 메세지 입력창에 포커스를 지정한다.
  msgE.focus();
  // 대화명을 비활성화 시킨다.
  nicknameE.setAttribute("disabled", "disabled")  
 }
 
 // 서버 접속
 function connectServer(){
  // TODO 1. Server 접속
  es = new EventSource("SseServer.jsp");
  
  // TODO 2. message 이벤트 처리(서버에서 메세지를 받을 경우 메세지를 출력한다)
  es.onmessage = function(me){
   showMsg(me.data);
  };
 }
 
 // 지정한 메세지를 텍스트박스에 출력한다.
 function showMsg(msg){
  panelE.value += msg + "\n";
  // 텍스트박스의 스크롤을 밑으로 이동한다.
  panelE.scrollTop = panelE.scrollHeight;
 }
 
 // 로그아웃
 function logout(){
  // 로그아웃 메세지 전송
  sendMsg(nicknameE.value + "님이 퇴장했습니다.");
  
  // 서버 접속을 종료한다.
  closeServer();
  
  loginE.style.display = "inline";
  logoutE.style.display = "none";  
  inputMsgE.style.display = "none";
  nicknameE.value = "";
  nicknameE.removeAttribute("disabled");
 }
 
 // 서버 접속 종료
 function closeServer(){
  // TODO 3. 서버 접속 종료
  es.close();
  
  // 대화내용 저장 여부를 물어보고 대화내용을 localStorage에 저장한다.
  showMsg("대화가 종료 되었습니다.");
 }
 
 // 서버에 지정한 메세지를 전송한다.
 function sendMsg(msg){
  // TODO 4. Ajax 요청으로 서버(messageServer.jsp?msg=xxx)에 메세지 전송
  var xhr = new XMLHttpRequest();
  xhr.open("GET", "messageServer.jsp?msg=" + msg);
  xhr.send(null);  
  
  msgE.value = "";
  msgE.focus();
 } 
 
 // 페이지 로딩 후 처리할 작업
 window.onload = function(){
  //선언하고 사용시 지역변수
  //선언하지 않고 사용시 전역변수가 됨
  nicknameE = document.getElementById("nickname");
  loginE = document.getElementById("login");
  logoutE = document.getElementById("logout");
  historyE = document.getElementById("history");
  panelE = document.getElementById("panel");
  inputMsgE = document.getElementById("inputMsg");
  msgE = document.getElementById("msg");
  sendE = document.getElementById("send");
  
  // 로그인 버튼 클릭
  loginE.onclick = login;
  
  // 로그아웃 버튼 클릭
  logoutE.onclick = logout;
  
  // 메세지 전송 버튼 클릭
  sendE.onclick = function(){
   if(msgE.value != ""){
    sendMsg(nicknameE.value + ": " + msgE.value);
   }
  };
  
  // 메세지 입력후 엔터 누름
  msgE.onkeydown = function(e){
   if(e.keyCode == 13){
    if(msgE.value != ""){
     sendMsg(nicknameE.value + ": " + msgE.value);
    }
   }
  };
  
 };
 
</script>
</head>
<body>
 <h1>SSE 채팅</h1>
 <div>
  <input type="text" id="nickname" maxLength="12" placeholder="대화명">
  <button id="login">로그인</button>
  <button id="logout">로그아웃</button>
  <br>
  <textarea id="panel" rows="20" cols="60" disabled></textarea>
  <br>
  <div id="inputMsg">
   <input type="text" id="msg" size="50">
   <button id="send">메세지 전송</button>
  </div>
 </div>
</body> 
</html>
